import './App.css';
import React from "react";   

import {Button, Checkbox,Row,Col } from "antd";  

import axios from 'axios'
 
function JsonHelper(checkedValues) {
  var arr=[];
  checkedValues.forEach(element => {
    arr.push(JSON.parse(element));
  });
  return arr;
}
 
class CustomSelect extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      currentIndex: 0 
    }
    this.setCurrentIndex = this.setCurrentIndex.bind(this)
  }
  
  setCurrentIndex(event) {
    this.setState({
      currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
    })
  }  
 
  render() { 
    
    return (
             <Checkbox.Group style={{ width: '100%' }} className="trans"   onChange={this.props.onChange} value={this.props.value}>
               {
                    this.props.data.map(item => (<Row  key={item.id}><Checkbox onClick={this.props.onClick} style={{margin:'auto'}} className={this.props.checked ? 'active' : ''} value={JSON.stringify(item)} checked={false} >{item.name}</Checkbox></Row>)) 
               }   
             </Checkbox.Group>
            );
  }
}
 
class Init extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lefts:[],
      rights:[],
      email:'',
      count:0,
      RightValues:[],
      LeftValues:[] 
    }

    this.Right = this.Right.bind(this);
    this.Email=this.Email.bind(this);
    this.Left=this.Left.bind(this);

    this.LeftOnClick = this.LeftOnClick.bind(this);
    this.RightOnClick=this.RightOnClick.bind(this); 

    this.LeftOnChange = this.LeftOnChange.bind(this);
    this.RightOnChange=this.RightOnChange.bind(this); 
  }
    LeftOnChange(checkedValue) {
      this.setState({
        LeftValues:checkedValue,
        RightValues:[]
      })
     
   
  }
    RightOnChange(checkedValue) {
      this.setState({
        RightValues:checkedValue,
        LeftValues:[]
      })
     
  }

  componentDidMount(){
    axios.post('/api/Test/Loading?name=idcf-boat-house')
    .then((res) => { 
      this.setState({
        lefts: res.data.lefts,
        rights: res.data.rights
      })
      
     
    })
    .catch(() => {
      alert('error')
    })
  }
  Right() {

    axios.post('/api/Test/Right',JsonHelper(this.state.LeftValues) )
      .then((res) => {
        console.log(res.data)
        this.setState({
          lefts: res.data.lefts 
        })
        this.setState({ 
          rights: res.data.rights
        })
      })
      .catch(() => {
        alert('error')
      })
  }

  Left() {
    axios.post('/api/Test/Left', JsonHelper(this.state.RightValues))
    .then((res) => {
      console.log(res.data)
      this.setState({
        lefts: res.data.lefts,
        rights: res.data.rights
      })
      
    })
    .catch(() => {
      alert('error')
    })
  }
  
  Email() {
    axios.post('/api/Test/Email')
    .then((res) => {
      console.log(res.data)
      this.setState({
        email:res.data
      }) 
    })
    .catch(() => {
      alert('error')
    })
  }


  LeftOnClick(e) {   
    this.setState({count:this.state.count+1}) 
      setTimeout(() => {
        if (this.state.count === 1) {
          
          } else if (   this.state.count === 2) {
            if( e.target.checked===false){
              e.target.checked=!e.target.checked;
            }
            var arr= []
            arr.push(JSON.parse( e.target.defaultValue))
            axios.post('/api/Test/Right',arr)
            .then((res) => {
              console.log(res.data)
              this.setState({
                lefts: res.data.lefts,
                rights: res.data.rights
              })
              
            })
            .catch(() => {
              alert('error')
            })
            e.preventDefault(); 
      }
      
      this.setState({count:0}) 
  }, 300)
  
  } 
  
      RightOnClick(e) {  
        this.setState({count:this.state.count+1}) 
        setTimeout(() => {
          if (this.state.count === 1) {
            
            } else if (   this.state.count === 2) {
              if( e.target.checked===false){
                e.target.checked=!e.target.checked;
              }
              var arr= []
              arr.push(JSON.parse( e.target.defaultValue))
              axios.post('/api/Test/Left',arr)
              .then((res) => {
                console.log(res.data)
                this.setState({
                  lefts: res.data.lefts,
                  rights: res.data.rights
                })
                
              })
              .catch(() => {
                alert('error')
              })
              e.preventDefault(); 
        }
        
        this.setState({count:0}) 
    }, 300)
    
    
   
   } 
  render() { 
    return (
      <div  >
         <Row  >
      <Row md={24}  className="co" >
      <Col  style={{width:'calc(50% - 38.5px)'}}>
      <CustomSelect  data={this.state.lefts} onChange={this.LeftOnChange} onClick={this.LeftOnClick} value={this.state.LeftValues} ></CustomSelect>
      
    </Col>
    <Col  className='ant-transfer-operation'>
    <Button type="primary" block onClick={this.Right}>
    &gt;&gt;&gt;
    </Button>
    <Button type="primary" block onClick={this.Left}>
    &lt;&lt;&lt;
    </Button>
  
    </Col>
    <Col  style={{width:'calc(50% - 38.5px)'}}>
    
    <CustomSelect data={this.state.rights}  onChange={this.RightOnChange} onClick={this.RightOnClick} value={this.state.RightValues}></CustomSelect>
    </Col>
      </Row> 
  </Row>

  <Row md={24}  className="co"  style={{display: "block",textAlign:'center'}} >
    <Button type="primary" block style={{width:"100px",marginTop:'10px',marginBottom:'10px'}} onClick={this.Email} >
     Email
    </Button>
     
    </Row>

    <Row md={24}  className="co"  >
    <div  className="email"  dangerouslySetInnerHTML={{__html:this.state.email}}>
 
    </div>
     
    </Row>
    
      </div>
      );
  }
}

function App() { 
  return ( 
  <div style={{padding:'2px'}} > 
    <Init id="init"   ></Init> 
  </div>
      
  );
  
}

 
export default App;


 
 
